<template>
<!-- <pullRefresh ref="pullresh" :fromData="form" :getDataList="dataAPI"  @getdata="getlist"> -->
              <!-- <labelName :title="'指标'"></labelName>
            <div class="card-box">
                     <card :data="item" v-for="(item,index) in listCard" :key="index"></card>
            </div> -->
      <el-header class="header">
        
      <Condition :varietyshow = "false"  @search="gosearch"></Condition>
    </el-header>
        <el-main>
       <!-- <div class="content-box"> -->
            <labelName margin="1rem 0 1rem" :title="'指标'"></labelName>
            <div class="card-box">
                     <card :data="item" v-for="(item,index) in listCard" :key="index"></card>
            </div>
             <div  v-auth="['particulars-buy']">
              <labelName margin="1rem 0 1rem" :title="'购进品类占比'"></labelName>
              <chartCard :echartsData="echartsProportion " height="30rem"></chartCard>
             </div>
              <div  v-auth="['particulars-distribution']">
             <labelName :title="'分销渠道占比'"></labelName>
            <chartCard :echartsData="echartsDistribution" height="30rem"></chartCard>
             </div>
                          <div  v-auth="['particulars-inventory']">
            <labelName :title="'库存品类占比'"></labelName>
            <chartCard :echartsData="echartsInventory" height="30rem"></chartCard>
             </div>
                          <div  v-auth="['particulars-recent-three']">
                <labelName :title="'近三年购进/分销金额'"></labelName>
            <chartCard :echartsData="schartsPastYear" height="30rem"></chartCard>
             </div>
                          <div  v-auth="['particulars-recent-June']">

                <labelName :title="'近6月销售情况'"></labelName>
            <chartCard :echartsData="schartsPastMonth" height="30rem"></chartCard>
             </div>
                          <div  v-auth="['particulars-money']">
            <labelName :title="'金额（按流出城市）'"></labelName>
            <!-- <chartCard :echartsData="echartsMoney" height="30rem"></chartCard> -->
            <moneyCityTable :pageNum="form1.pageNum" :logdingB="logding1" :pagetotal="form1.pagetotal" :tableData="detailist" @getdata="getlistdatas"></moneyCityTable>
             </div>
                          <div  v-auth="['particulars-business']">

             <labelName :title="'购进明细'"></labelName>
            <purchaseTable :pageNum="form.pageNum" :datano="datano" :logdingB="logding" :pagetotal="form.pagetotal" :tableData="detailist" @getdata="getlistdata"></purchaseTable>
             </div>


    </el-main>



    <!-- </pullRefresh> -->
</template>

<script>
import card from '../../components/card.vue'
import labelName from '../../components/labelname.vue'
import chartCard from '../../components/chartcard.vue'
import purchaseTable from '../../components/purchaseTable.vue'
import moneyCityTable from '../../components/moneyCityTable.vue'
import Condition from '../../components/condition.vue'
import * as echarts from "echarts"
import img1 from '@/assets/img/countIcon.png'
import img2 from '@/assets/img/upicon.png'
export default {
  components:{
   //   Navbar,
     card,
     labelName,
     chartCard,
     purchaseTable,
     Condition,
     moneyCityTable
   //   
  },
    data(){
     return{
        form:{
           startTime:"",
           endTime:'',
           pageSize:10,
           pageNum:0,
           pagetotal:0,
        },
         form1:{
           startTime:"",
           endTime:'',
           pageSize:10,
           pageNum:0,
           pagetotal:0
        },
        logding:false,
        logding1:false,
        datano:true,
        listCard:[],
        rules:{},
        detailist:[],
      // 购进类占比
      echartsProportion:{
                color: ["#FCA169", "#7488FF", "#FF596F", "#D770ED"],
                  tooltip: {
                  trigger: 'item',
                        formatter: function(data){
                          console.log(data)
                              let    str = `<div style=" width: 100%; display: flex; align-items: center;"><div style='background:${data.color}; width: 0.8rem;height: 0.8rem;border-radius: 50rem; margin-right:0.4rem'>
                                           </div><span style="font-size:1.25rem;color:${data.color}"> ${data.name}</span></div><div style="font-size:1.08rem;margin-top:0.4rem">金额：${data.value}万</div>
                                           <div style="font-size:1.08rem;margin-top:0.4rem; display: flex; align-items: center;justify-content: space-between;"><span>同比</span>  <img style="width: 1rem;height: 0.5rem;" src='${data.data.type==0?img1:img2}'></img> <span>${data.data.yearOnYear}</soan> </div>`
                             return str
                        },  
                   },
                     legend: {
    left: 0,
    top: 20,
    // bottom: 20,
    data: []
    },
               series: [
                     {
                    name: '战略品种（金额）',
                    type: 'pie',
                    top:'center',
                    left:'center',
                    radius: ['0%' ,'120%'],
                    label:{
                        normal:{
                        position: 'inside',
                        formatter:'{name|{d}%}',
                        rich:{
                            name:{
                            fontSize: 14,
                            align:'left',
                            color: '#fff',
                            }
                        }
                        }
                      },
                    center: ['50%', '50%'],
                    data: [
                        // {value: 335, name: '直接访问',product:123,label:{textStyle:{
                        //   color:'#FCA169'
                        // }}},
                        // {value: 310, name: '邮件营销',product:123,label:{textStyle:{
                        //   color:'#7488FF'
                        // }}},
                        // {value: 234, name: '联盟广告',product:123,label:{textStyle:{
                        //   color:'#FF596F'
                        // }}},
                        // {value: 135, name: '视频广告',product:123,label:{textStyle:{
                        //   color:'#D770ED'
                        // }}},
                    ],
                    product:[1,2,3,4],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    }
                }
            ]
        },

        // 金额（按流出城市）
      echartsMoney:{
                color: ["#FCA169", "#7488FF", "#FF596F", "#D770ED"],
                  tooltip: {
                  trigger: 'item',
                        formatter: function(data){
                          console.log(data)
                              let    str = `<div style=" width: 100%; display: flex; align-items: center;"><div style='background:${data.color}; width: 0.8rem;height: 0.8rem;border-radius: 50rem; margin-right:0.4rem'>
                                           </div><span style="font-size:1.25rem;color:${data.color}"> ${data.name}</span></div><div style="font-size:1.08rem;margin-top:0.4rem">金额：${data.value}万</div>
                                           <div style="font-size:1.08rem;margin-top:0.4rem; display: flex; align-items: center;justify-content: space-between;"><span>同比</span>  <img style="width: 1rem;height: 0.5rem;" src='${data.data.type==0?img1:img2}'></img> <span>${data.data.yearOnYear}</soan> </div>`
                             return str
                        },  
                   },
                     legend: {
    left: 0,
    top: 20,
    // bottom: 20,
    data: []
    },
               series: [
                     {
                    name: '战略品种（金额）',
                    type: 'pie',
                    top:'center',
                    left:'center',
                    radius: ['0%' ,'120%'],
                    label:{
                        normal:{
                        position: 'inside',
                        formatter:'{name|{d}%}',
                        rich:{
                            name:{
                            fontSize: 14,
                            align:'left',
                            color: '#fff',
                            }
                        }
                        }
                      },
                    center: ['50%', '50%'],
                    data: [
                        // {value: 335, name: '直接访问',product:123,label:{textStyle:{
                        //   color:'#FCA169'
                        // }}},
                        // {value: 310, name: '邮件营销',product:123,label:{textStyle:{
                        //   color:'#7488FF'
                        // }}},
                        // {value: 234, name: '联盟广告',product:123,label:{textStyle:{
                        //   color:'#FF596F'
                        // }}},
                        // {value: 135, name: '视频广告',product:123,label:{textStyle:{
                        //   color:'#D770ED'
                        // }}},
                    ],
                    product:[1,2,3,4],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    }
                }
            ]
        },

        // 分销渠道占比
        echartsDistribution:{
                color: ["#FCA169", "#7488FF", "#FF596F", "#D770ED"],
                  tooltip: {
                  trigger: 'item',
                        formatter: function(data){
                          console.log(data)
                              let    str = `<div style=" width: 100%; display: flex; align-items: center;"><div style='background:${data.color}; width: 0.8rem;height: 0.8rem;border-radius: 50rem; margin-right:0.4rem'>
                                           </div><span style="font-size:1.25rem;color:${data.color}"> ${data.name}</span></div><div style="font-size:1.08rem;margin-top:0.4rem">金额：${data.value}万</div>
                                           <div style="font-size:1.08rem;margin-top:0.4rem; display: flex; align-items: center;justify-content: space-between;"><span>同比</span>  <img style="width: 1rem;height: 0.5rem;" src='${data.data.type==0?img1:img2}'></img> <span>${data.data.yearOnYear}</soan> </div>`
                             return str
                        },  
                   },
                     legend: {
    left: 0,
    top: 20,
    // bottom: 20,
    data: []
    },
               series: [
                     {
                    name: '战略品种（金额）',
                    type: 'pie',
                    top:'center',
                    left:'center',
                    radius: ['0%' ,'120%'],
                    label:{
                        normal:{
                        position: 'inside',
                        formatter:'{name|{d}%}',
                        rich:{
                            name:{
                            fontSize: 14,
                            align:'left',
                            color: '#fff',
                            }
                        }
                        }
                      },
                    center: ['50%', '50%'],
                    data: [
                        // {value: 335, name: '直接访问',product:123,label:{textStyle:{
                        //   color:'#FCA169'
                        // }}},
                        // {value: 310, name: '邮件营销',product:123,label:{textStyle:{
                        //   color:'#7488FF'
                        // }}},
                        // {value: 234, name: '联盟广告',product:123,label:{textStyle:{
                        //   color:'#FF596F'
                        // }}},
                        // {value: 135, name: '视频广告',product:123,label:{textStyle:{
                        //   color:'#D770ED'
                        // }}},
                    ],
                    product:[1,2,3,4],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    }
                }
            ]
        },
        // 库存品类占比
        echartsInventory:{
                color: ["#FCA169", "#7488FF", "#FF596F", "#D770ED"],
                  tooltip: {
                  trigger: 'item',
                        formatter: function(data){
                          console.log(data)
                              let    str = `<div style=" width: 100%; display: flex; align-items: center;"><div style='background:${data.color}; width: 0.8rem;height: 0.8rem;border-radius: 50rem; margin-right:0.4rem'>
                                           </div><span style="font-size:1.25rem;color:${data.color}"> ${data.name}</span></div><div style="font-size:1.08rem;margin-top:0.4rem">金额：${data.value}万</div>
                                           <div style="font-size:1.08rem;margin-top:0.4rem; display: flex; align-items: center;justify-content: space-between;"><span>同比</span>  <img style="width: 1rem;height: 0.5rem;" src='${data.data.type==0?img1:img2}'></img> <span>${data.data.yearOnYear}</soan> </div>`
                             return str
                        },  
                   },
                     legend: {
    left: 0,
    top: 20,
    // bottom: 20,
    data: []
    },
               series: [
                     {
                    name: '战略品种（金额）',
                    type: 'pie',
                    top:'center',
                    left:'center',
                    radius: ['0%' ,'120%'],
                    label:{
                        normal:{
                        position: 'inside',
                        formatter:'{name|{d}%}',
                        rich:{
                            name:{
                            fontSize: 14,
                            align:'left',
                            color: '#fff',
                            }
                        }
                        }
                      },
                    center: ['50%', '50%'],
                    data: [
                        // {value: 335, name: '直接访问',product:123,label:{textStyle:{
                        //   color:'#FCA169'
                        // }}},
                        // {value: 310, name: '邮件营销',product:123,label:{textStyle:{
                        //   color:'#7488FF'
                        // }}},
                        // {value: 234, name: '联盟广告',product:123,label:{textStyle:{
                        //   color:'#FF596F'
                        // }}},
                        // {value: 135, name: '视频广告',product:123,label:{textStyle:{
                        //   color:'#D770ED'
                        // }}},
                    ],
                    product:[1,2,3,4],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                        }
                    }
                }
            ]
        },

        // 近3年
        schartsPastYear: {
                  tooltip: {
                trigger: "axis",
                 axisPointer: {
                     type: "shadow"
                  },
            formatter: (data) => {
              let str = '<div style="color:#0C1B52;font-size: 15px;font-weight: bold;margin-bottom: 5px;">' + data[0].axisValue + '</br></div>'
              data.reverse().forEach((item,index) => {
                str = str + '<div style="font-size: 12px;padding: 4px 0">' + '<div style="display:inline-block;margin-right:4px;width:12px;height:8px;background-color:' + item.color.colorStops[index].color + ';"></div>' + item.seriesName + ' : ' + item.data + '</br></div>'
              })
              return str
               }
             },
  
    legend: {
        data: ['累计购进', '累计分销'],
        right: '40',
        // itemWidth:10,
        // itemHeight:10,
        textStyle:{
            fontSize:'1rem'
        },
        top:'10'
    },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['2021', '2022', '2023'],
    splitLine:{
   show:false
},
  },
  yAxis: {
        type: 'value',
    boundaryGap: [0, 0.01],
    splitLine:{
   show:false
},

  },
  series: [
    {
      name: '累计购进',
      type: 'bar',
       barWidth: this.fontSize(40),
      data: [18203, 23489, 29034,],
          itemStyle:{
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#1E85DE' },  //开始的颜色
         { offset: 0, color: '#71BDFF' }  //结束的颜色
        ]),
    }
    },
    {
      name: '累计分销',
      type: 'bar',
       barWidth: this.fontSize(40),
      data: [19325, 23438, 31000],
         itemStyle:{
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#FFAD00'},  //开始的颜色
         { offset: 0, color: '#FFD479' }  //结束的颜色
          ]),
        },
    }
  ]
},         
        //  进六个月 
        schartsPastMonth :{
            tooltip: {
                show:false,
                trigger: "axis",
                 axisPointer: {
                     type: "shadow"
                  },
            formatter: (data) => {
              let str = '<div style="color:#0C1B52;font-size: 15px;font-weight: bold;margin-bottom: 5px;">' + data[0].axisValue + '</br></div>'
              data.reverse().forEach((item,index) => {
                str = str + '<div style="font-size: 12px;padding: 4px 0">' + '<div style="display:inline-block;margin-right:4px;width:12px;height:4px;background-color:' + item.color.colorStops[index].color + ';"></div>' + item.seriesName + ' : ' + item.data + '</br></div>'
              })
              return str
               }
             },
  xAxis: {
      
   splitLine:{
       show:false
    },
    type: 'category',
    data: ['12月', '1月', '2月', '3月', '4月', '5月']
  },
  yAxis:    {
      
splitLine:{
   show:false
},
      type: 'value',
      name: '销售额',
      nameTextStyle:{
          color:'#555555'
      },
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#EAEAEA'
        }
      },
      axisLabel: {
        formatter: '{value}',
        color:'#555555'
      }
    },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
         barWidth: this.fontSize(40),
               label: {
        show: true,
        position: 'top',
        formatter:'{c}万'
      },
         itemStyle:{
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   
         { offset: 1, color: '#FFAD00'},  //开始的颜色
         { offset: 0, color: '#FFD479' }  //结束的颜色
          ]),
        },

    }
  ]
    }

     }
  },
  created(){
       console.log(this.$route.params)
       this.getdata()
       this.getlistdata()
  },
    mounted(){
       
    },
    methods:{
          gosearch(data){
      this.form.startTime = data.startTime
      this.form.endTime = data.endTime
      this.form.pageNum = 0
      this.datano = true
      
      this.form1.startTime = data.startTime
      this.form1.endTime = data.endTime
      this.form1.pageNum = 0
      this.form1.pagetotal = 0
      this.getdata()
      this.detailist = [] 
      this.getlistdata()
       },
       fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
	if (!clientWidth) return
	let fontSize = clientWidth / 1920
	return res*fontSize
     	},
        getdata(){
           let data =  this.$API.clientM.customerInfo.salesAchievement.post(this.form)
           data.then(res=>{
             if(res.code=='0'){
                if(res.data.yearOnYears.length>0){
                  this.listCard = res.data.yearOnYears
                }
                // 购进品类比
                if(res.data.purchaseProportion.length>0){ 
                  let arr = []
                  let arr1 = []
               res.data.purchaseProportion.forEach((item,index)=>{
                     let objdata = {
                       name:item.name,
                       value:item.quantity,
                       type:item.type,
                       label:{
                          textStyle:{
                          color: this.echartsProportion.color[index]
                        }
                       },
                       yearOnYear:item.yearOnYear
                     }
                     arr1.push(item.name)
                     arr.push(objdata)
               })
                this.echartsProportion.series[0].data = arr 
                 this.echartsProportion.legend.data = arr1 
                }
                // 金额（按流出城市）
              if(res.data.amountByCity.length>0){ 
                  let arr = []
                  let arr1 = []
               res.data.amountByCity.forEach((item,index)=>{
                     let objdata = {
                       name:item.name,
                       value:item.quantity,
                       type:item.type,
                       label:{
                          textStyle:{
                          color: this.echartsMoney.color[index]
                        }
                       },
                       yearOnYear:item.yearOnYear
                     }
                         arr1.push(item.name)
                     arr.push(objdata)
               })
                this.echartsMoney.series[0].data = arr 
                 this.echartsMoney.legend.data = arr1
                 }
                 // 分销渠道占比
              if(res.data.channelProportion.length>0){ 
                  let arr = []
                  let arr1 = []
               res.data.channelProportion.forEach((item,index)=>{
                     let objdata = {
                       name:item.name,
                       value:item.quantity,
                       type:item.type,
                       label:{
                          textStyle:{
                          color: this.echartsDistribution.color[index]
                        }
                       },
                       yearOnYear:item.yearOnYear
                     }
                      arr1.push(item.name)
                     arr.push(objdata)
               })
                this.echartsDistribution.series[0].data = arr 
                 this.echartsDistribution.legend.data = arr1
                }
              // 库存品类占比
              if(res.data.inventoryProportion.length>0){ 
                  let arr = []
                  let arr1 = []
               res.data.inventoryProportion.forEach((item,index)=>{
                     let objdata = {
                       name:item.name,
                       value:item.quantity,
                       type:item.type,
                       label:{
                          textStyle:{
                          color: this.echartsInventory.color[index]
                        }
                       },
                       yearOnYear:item.yearOnYear
                     }
                     arr1.push(item.name)
                     arr.push(objdata)
               })
                this.echartsInventory.series[0].data = arr 
                this.echartsInventory.legend.data = arr1
                }
              // 近3年
                if(res.data.amountSituation.length>0){
                    let arr = []
                    let arr1 = []
                    let arr2 = []
                    res.data.amountSituation.forEach(item=>{
                        arr.push(item.year)
                        arr1.push(item.purchaseAmount)
                        arr2.push(item.distributionAmount)
                    })
                    this.schartsPastYear.xAxis.data = arr
                     this.schartsPastYear.series[0].data = arr1
                      this.schartsPastYear.series[1].data = arr2
                      // console.log(arr1)
                      // this.this.schartsPastYear = {...this.schartsPastYear}
                }
              //  进六个月 
              if(res.data.salesSituation.length>0){
                let arr = []
                let arr1 = []
                    res.data.salesSituation.forEach(item=>{
                          arr.push(item.year)
                          arr1.push(item.amount)
                    })
                this.schartsPastMonth.xAxis.data = arr
                 this.schartsPastMonth.series[0].data = arr1
              }
             }
           })
        },
        async getlistdata(){
             this.logding =true
             this.form.pageNum++
             this.form = {...this.form}
            let res  =  await this.$API.clientM.customerInfo.purchaseDetails.post(this.form)
            console.log(res)
            if(res.code=='0'){
              if(res.data.length<this.form.pageSize){
                this.datano = false
              }
                this.logding = false
                this.form.pagetotal = res.pages
                this.detailist = [...this.detailist,...res.data]
            }
        },
         async getlistdatas(){
             this.logding1 =true
             this.form1.pageNum++
             this.form1 = {...this.form1}
            let res  =  await this.$API.clientM.customerInfo.purchaseDetails.post(this.form)
            console.log(res)
            if(res.code=='0'){
                 this.form1.pagetotal = res.pages
                this.logding1 = false
                this.detailist = [...this.detailist,...res.data]
            }
        }
      }
}
</script>

<style scoped>
.content-box{
   /* width: calc(100vw); */
   /* height: calc(100vh - 132rem); */
   /* padding: 0 1.6rem; */
   margin: 0;
}
.el-main{
  padding: 5px !important;
}
.header{
    width: 100%;
    min-height:72px;
    display: flex;
}
.top{
    margin-top: 1.6rem;
}
.el-header{
--el-header-height:none;
}
.card-box{
    width:calc(100% - 1rem);
   display: grid;
   min-height: 12.2rem;
   padding: 0.5rem;
   margin: auto;
   grid-template-columns: repeat(3,1fr);
   column-gap:0.7rem ;
}
/deep/.adminui-main{
  background-color: #fff !important;
}
</style>